<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>视频投影demo</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>

    <div id="cameraConfigDiv"
        style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background-color:  rgba(255, 255, 255, 0.5); border: 1px solid #ccc; z-index: 999; display: none; user-select: none;">


        <div id="cameraConfigForm">
            <h2>摄像头配置</h2>
            <label>位置:</label>
            <input id="cameraPositionInput" style="width: 60%; margin-left: 15px;" placeholder="输入经纬度和高度,用逗号分开" ,
                value="13377542.1193, 3540532.0606, 500"><br><br>

            <label>视点:</label>
            <input id="cameraLookAtInput" style="width: 60%; margin-left: 15px;" placeholder="输入相机看向的经纬度,用逗号分开" ,
                value="13377302.1193, 3540532.0606"><br><br>

            <label>视场角:</label>
            <input id="cameraFovInput" style="width: 60%;" placeholder="输入相机的水平视场角" , value=30><br><br>

            <label>操作模式:</label>
            <select id="cameraModeSelect">
                <option value="rotate">旋转</option>
                <option value="translate">平移</option>
            </select>

            <style>
                #cameraConfigForm {
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 80%;
                    margin: 0 auto;
                }
            </style>

            <div style="display: block; margin-top: 5%; position: absolute; left: 30%; ">
                <button id="saveCamera">放置摄像机</button>
                <!-- <input type="checkbox" id="showOutline" name="showOutline" checked="true">显示摄像机轮廓<br><br> -->
                <script>
                    //为saveCamera添加点击事件
                    document.getElementById('saveCamera').addEventListener('click', function () {
                        let pointArray = document.getElementById('cameraPositionInput').value.split(',');
                        console.log(pointArray);
                        if (pointArray.length != 3) {
                            alert("请输入正确的摄像机位置");
                            return;
                        }

                        let lookAtPointArray = document.getElementById('cameraLookAtInput').value.split(',');
                        console.log(lookAtPointArray);
                        if (lookAtPointArray.length != 2) {
                            alert("请输入摄像机看向的正确位置");
                            return;
                        }

                        let cameraFov = document.getElementById('cameraFovInput').value;
                        console.log(cameraFov);
                        if (!cameraFov) {
                            alert("请输入正确的相机视场角");
                            return;
                        }

                        //获取cameraModeSelect的值
                        let cameraMode = document.getElementById('cameraModeSelect').value;
                        console.log(cameraMode);

                        //比如有一个字符串：let str = '123,456', 我希望用逗号分隔这个字符串，得到一个数组：[123,456]
                        cameraConfigDiv.style.display = 'none'; // 隐藏摄像头配置弹窗

                        let aspect = 1.2722371967654986;
                        let cameraParam = {
                            cameraPosition: new GE.Point(Number(pointArray[0]), Number(pointArray[1]), Number(pointArray[2]), '3857'),
                            targetPosition: new GE.Point(Number(lookAtPointArray[0]), Number(lookAtPointArray[1]), 0, '3857'),
                            fov: cameraFov,
                            aspect: aspect,
                            near: 10,
                            far: 100000,
                            controlModel: cameraMode
                        };
                        projectTextureObject.setCamera(cameraParam);
                        app.ui.remove(cameraBtn);

                        setVideoUrl();
                    })
                </script>
            </div>

        </div>
    </div>

    <div id="distortionDiv" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background-color:  rgba(255, 255, 255, 0.5); border: 1px solid #ccc; z-index: 999; display: none; user-select: none;">


        <div id="distortionForm">
            <h2>畸变配置</h2>
            <label>步长:</label>
            <input id="distortionStepInput" style="width: 60%; margin-left: 15px;" placeholder="请输入畸变的步长" ,
                value=0.1><br><br>

            <label>角度:</label>
            <input id="distortionAngleInput" style="width: 60%; margin-left: 15px;" placeholder="请输入畸变的角度" ,
                value="10"><br><br>

            <style>
                #distortionForm {
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 80%;
                    margin: 0 auto;
                }
            </style>

            <div style="display: block; margin-top: 5%; position: absolute; left: 30%; ">
                <button id="startDistortion">开始畸变</button>
                <!-- <input type="checkbox" id="showOutline" name="showOutline" checked="true">显示摄像机轮廓<br><br> -->
                <script>
                    //为saveCamera添加点击事件
                    document.getElementById('startDistortion').addEventListener('click', function () {
                        let distortionStep = document.getElementById('distortionStepInput').value;
                        console.log(distortionStep);
                        if (!distortionStep || (distortionStep < 0 || distortionStep > 1)) {
                            alert("正确的步长在0-1之间");
                            return;
                        }

                        let distortionAngle = document.getElementById('distortionAngleInput').value;
                        console.log(distortionAngle);
                        if (!distortionAngle || (distortionAngle < 0 || distortionAngle > 360)) {
                            alert("正确的角度在0-360度之间");
                            return;
                        }

                        distortionDiv.style.display = 'none'; // 隐藏摄像头配置弹窗
                        projectTextureObject.setDistortion({isOpenDistortion: true, distortionStep: distortionStep, distortionAngle: distortionAngle});
                        distortionBtn.setButtonValue('关闭畸变');
                    })
                </script>
            </div>

        </div>
    </div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.170646, 30.28562, 1200], //相机的位置
        // lookAt: [120.170646, 30.29762, 0], //相机看向的地图位置
        lookAt: [120.170646, 30.28562, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        maxSlopeAngle: 80, //地图最大倾斜角度
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            },
            //shape底图
            {
                // url: 'http://localhost:9000/examples/resources/shp/Tiles/L{z}/{y}/{x}.shp', //shape底图的url
                url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/ShpCLipper/L{z}/{y}/{x}.shp', //shape底图的url
                urlDecimal: true, //shape底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'shape',  //shape底图
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                merge: true //几何体是否合并
            }
        ]
    });

    window.app.on('Click', function (e) {
        console.log(e);
    });

    // let url = 'https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217021133Eggh6zdlAO.mp4';
    let url = 'https://demo.m3u8play.com/m3u8/out/demo.m3u8';
    let textureProjectMix = 1;
    let options = { texture: url, isVideoTexture: true, lineColor: '#00FA9A', textureProjectMix: textureProjectMix };
    var projectTextureObject = new GE.ProjectTextureObject();

    app.openStats();

    var distortionBtn, cameraBtn, maskBtn, blendBtn, shadowBtn, cameraControlBtn;
    setCamera();

    function setCamera() {
        cameraBtn = new GE.Button('设置投影相机', function () {
            // projectTextureObject.setCamera(cameraParam);
            // app.ui.remove(cameraBtn);

            // playVideo();
            var cameraConfigDiv = document.getElementById('cameraConfigDiv');
            // cameraConfigDiv.style.left = (window.innerWidth - cameraConfigDiv.offsetWidth) / 2 + 'px';
            // cameraConfigDiv.style.top = (window.innerHeight - cameraConfigDiv.offsetHeight) / 2 + 'px';
            //cameraConfigDiv默认不显示
            // cameraConfigDiv.style.display = 'none';
            //要让cameraConfigDiv显示
            cameraConfigDiv.style.display = 'block';
        });
        app.ui.add(cameraBtn);
    }

    var videoUrl = 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8'; //'https://demo.m3u8play.com/m3u8/out/demo.m3u8';
    function setVideoUrl() {
        let videoUrlBtn = new GE.Button('设置视频的地址', function () {
            videoUrl = prompt('请输入视频的地址', videoUrl);
            if (!videoUrl) {
                videoUrl = 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8'; //'https://demo.m3u8play.com/m3u8/out/demo.m3u8';
                return;
            }
            app.ui.remove(videoUrlBtn);
            console.log(videoUrl);

            let videoOptions = { texture: videoUrl, isVideoTexture: true }
            projectTextureObject.setVideo(videoOptions);
            projectTextureObject.openProject();
            // app.ui.remove(playBtn);
            projectTextureObject.setDistortion({isOpenDistortion: false, distortionStep: 0, distortionAngle: 0}); //开启反畸变矫正
            
            setDistortion();
            setMask();
            setBlend();
            setCoverShadow();
            setCameraControl();
            closeVideo();
        });
        app.ui.add(videoUrlBtn);
    }

    // var distortionParam = {step: 0.0, angle: 0.0};
    var isOpenDistortion = false;
    function setDistortion(){
        distortionBtn = new GE.Button('开启畸变', function () {
            if (!isOpenDistortion) {
                var distortionDiv = document.getElementById('distortionDiv');
                distortionDiv.style.display = 'block';
            } else {
                projectTextureObject.setDistortion({isOpenDistortion: false, distortionStep: 0, distortionAngle: 0});
                distortionBtn.setButtonValue('开启畸变');
            }
            isOpenDistortion = !isOpenDistortion;
        });
        app.ui.add(distortionBtn);
    }

    var maskImg = 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/images/img_logo.39362dc1.png'; //'http://192.168.2.41:9000/examples/resources/images/mask.png';
    var isOpenMask = false;
    function setMask() {
        maskBtn = new GE.Button('开启蒙版', function () {
            if (!isOpenMask) {
                maskImg = prompt('请输入蒙版图片的地址', maskImg);
                if (!maskImg) {
                    maskImg = 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/images/img_logo.39362dc1.png';;
                    return;
                }
                projectTextureObject.setMask({ isOpenProjectMask: true, maskImage: maskImg }); //设置投影遮罩
                maskBtn.setButtonValue('关闭蒙版');
            } else {
                projectTextureObject.setMask({ isOpenProjectMask: false }); //关闭投影遮罩
                maskBtn.setButtonValue('开启蒙版');
            }
            isOpenMask = !isOpenMask;
        });
        app.ui.add(maskBtn);
    }

    var blendValue = 1.0;
    function setBlend() {
        blendBtn = new GE.Button('投影融合', function () {
            blendValue = prompt('请输入融合参数(在0-1之间)', blendValue);
            if (!blendValue) {
                blendValue = 1.0;
                return;
            }
            if (blendValue < 0) {
                blendValue = 0;
            } else if (blendValue > 1) {
                blendValue = 1;
            }
            projectTextureObject.setProjectMix(blendValue); //设置投影混合度
        });
        app.ui.add(blendBtn);
    }

    var isCoverShadow = true; //是否开启阴影遮挡
    function setCoverShadow() {
        shadowBtn = new GE.Button('关闭阴影遮挡', function () {
            if (isCoverShadow) {
                projectTextureObject.setCoverShadow(false);
                shadowBtn.setButtonValue('开启阴影遮挡');
            }
            else {
                projectTextureObject.setCoverShadow(true);
                shadowBtn.setButtonValue('关闭阴影遮挡');
            }
            isCoverShadow = !isCoverShadow;
        });
        app.ui.add(shadowBtn);
    }

    var isOpenControl = true; //是否开启控制器
    function setCameraControl() {
        cameraControlBtn = new GE.Button('关闭控制器', function () {
            if (isOpenControl) {
                projectTextureObject.hideControl();
                cameraControlBtn.setButtonValue('开启控制器');
            }
            else {
                let virtualCameraData = projectTextureObject.getVirturalCameraData();
                let controlModel = virtualCameraData.controlModel;
                projectTextureObject.setControlModel(controlModel);
                cameraControlBtn.setButtonValue('关闭控制器');
            }
            isOpenControl = !isOpenControl;
        });
        app.ui.add(cameraControlBtn);
    }

    function closeVideo() {
        let closeBtn = new GE.Button('关闭视频投影', function () {
            projectTextureObject.closeProject();
            projectTextureObject = null;

            app.ui.remove(distortionBtn);
            isOpenDistortion = false;

            app.ui.remove(closeBtn);
            
            app.ui.remove(maskBtn);
            isOpenMask = false;

            app.ui.remove(blendBtn);

            app.ui.remove(cameraControlBtn);
            isOpenControl = true;

            app.ui.remove(shadowBtn);
            isCoverShadow = true;

            projectTextureObject = new GE.ProjectTextureObject(options);
            setCamera();
        });
        app.ui.add(closeBtn);
    }

    function closeAnalysis() {
        if (!projectTextureObject) {
            return;
        }
        projectTextureObject.closeProject();
    }

    var model;
    function fbx() {
        model = new GE.OverLay({
            type: 'fbx',
            url: 'http://localhost:9000/examples/resources/fbx/xqazm.fbx',
            position: [120.170646, 30.28362, 50],
            noTextureProject: false, //是否禁止纹理投影
            // scale: [100, 100, 100],
            // rotation: [45, 0, 0],
            success: function () {
                // setTimeout(btn, 300);
                // btn();
            }
        });
        app.add(model);
    }

    // fbx();

</script>

</html>